<!-- 书库列表 -->
<template>
	<scroll-view class="pointslist" scroll-y="true">
		<view class="type" v-for="(item,index) in List" :key="index" @click="getDeatil(item.book_id)">
			<view class="header_type" >
				<image src="../../image/point01.png" class="header_img" v-if="index+1 == 1 "></image>
				<image src="../../image/point02.png" style="width: 1.5rem;height: 1.6rem;" v-if="index+1 == 2 "></image>
				<image src="../../image/point03.png" class="header_img" v-if="index+1 == 3 "></image>
				<view class="header_text" v-if="index+1 == 1 || index+1 == 2 || index+1 == 3"></view>
				<view class="header_text" v-else>{{index+1}}</view>
				<image src="../../image/point_btn.png" class="header_btn"></image>
			</view>
			<view class="img">
				<image :src="item.cover" class="content_img"></image>
			</view>
			<view class="content">
				<view class="content_text">{{item.title}}</view>
				<view class="content_title">{{item.description}}</view>
				<view class="banner">
					<image src="../../image/remen.png" class="banner_img"></image>
					<view class="banner_text">热度:{{item.view_num}}</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { getbooklist } from '../../api/home.js'
	export default {
		data() {
			return {
				List:[]
			}
		},
		mounted(){
			var parem = {
				cate_id:1
			}
			getbooklist(parem).then(res =>{
				this.List = res.data
			})
		},
		
		methods: {
			getDeatil(data){
				// this.$Router.push({name: 'Authorization',params: {bookId: data}})
				this.$Router.push({name: 'bookDetail',params: {bookId: data}})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pointslist{
		width:100%;
		height:calc(100vh - 1rpx);
	}
	.type{
		background: #FFFFFF;
		padding: 10px 15px;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		margin-bottom: 0.5rem;
	}
	.header_type{
		height: 9rem;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-right: 0.8rem;
	}
	.header_img{
		width: 1.2rem;
		height:1.5rem ;
	}
	.header_btn{
		width:1.2rem;
		height: 0.25rem;
		margin-top: 0.3rem;
	}
	.header_text{
		font-size: 0.8rem;
		color: #bbbbbb;
		font-weight: bold;
	}
	.img{margin-right: 0.5rem;}
	.content{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
	}
	.content_img{
		width: 6.6rem;
		height: 9.5rem;
	}
	.content_text{
		font-size: 1.1rem;
		color: #333333;
		font-weight: bold;
	}
	.content_title{
		font-size: 0.9rem;
		color: #666666;
		overflow: hidden;
		-webkit-line-clamp:4;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		// height: 5.5rem;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
	.banner{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.banner_img{
		width: 1rem;
		height: 1rem;
	}
	.banner_text{
		font-size: 0.9rem;
		color: #3dbcc9;
		margin-left: 0.5rem;
	}
</style>
